<template>
	<div class="personal-account">
		<v-router-link :router-link="routerLinks"></v-router-link>
		<div class="personal-account-container">
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
import VRouterLink from '@/components/base/VRouterLink'

export default {
  name: 'PersonalAccount',
  components: {
    VRouterLink
  },
  data () {
    return {
      isSetUsername: true,
      isSetPayPassword: false,
      isSetEmail: false,
      showDialogType: '',
      username: '',
      phone: '',
      email: '',
      routerLinks: [
        {
          title: this.$t('message.accountSafe'),
          path: 'security'
        },
        {
          title: this.$t('message.setLogo'),
          path: 'profile'
        },
        {
          title: this.$t('message.socialAccount'),
          path: 'contact'
        }
      ]
    }
  },
  methods: {
    showDialog (val) {
      this.showDialogType = val
    },
    hideDialog () {
      this.showDialogType = ''
    },
    changeUsername (val) {
      this.username = val
      this.hideDialog()
    },
    changePassword () {
      this.hideDialog()
    },
    setPayPassword () {
      this.hideDialog()
    },
    changePayPassword () {
      this.hideDialog()
    },
    changePhone () {
      this.hideDialog()
    },
    changeEmail () {
      this.hideDialog()
    }
  },
  deactivated () {
    this.showDialogType = ''
  }
}
</script>

<style scoped>
.personal-account {
	padding: 40px;
  padding-bottom: 0;
	background-color: #fff;
	/*min-height: 771px;*/
}
</style>
